<template>
  <div>
    <div class="head">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/CourseManagement' }">数据管理</el-breadcrumb-item>
        <el-breadcrumb-item>课程管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="content">
      <!-- <div class="fa fa-address-book-o"></div> -->
      <el-card>
        <el-container>
          <el-aside width="150px">
              <div class="typeTree">
                <div><p>课程管理</p></div>
                <div class="search">
                  <el-input v-model="input" placeholder="请输入内容"></el-input>
                  <el-button size="small" icon="el-icon-edit"></el-button>
                </div>
                <div>
                  <el-tree
                    class="filter-tree"
                    :data="treeData"
                    :props="defaultProps"
                    default-expand-all
                    :filter-node-method="filterNode"
                    ref="tree">
                  </el-tree>
                </div>
              </div>
          </el-aside>
          <el-main style="background-color: white;">
            <div class="dictionaryCardTitle">
              <div class="dictiomarySelectDiv">
                <div class="selectName" style="margin-left:5px;">
                  <p style="text-align: center;">课程名称</p><el-input placeholder="请输入课程名称"></el-input>
                </div>
                <div class="selectName">
                  <p style="text-align: center;">课程类型</p><el-input placeholder="请输入课程类型"></el-input>
                </div>
                <div class="selectName">
                  <p style="text-align: center;">课程状态</p>
                  <el-select v-model="dValue" placeholder="课程状态" style="margin-left:10px;">
                    <el-option label="正常" value="true"></el-option>
                    <el-option label="异常" value="false"></el-option>
                  </el-select>
                </div>
                <div class="selectButton">
                  <el-button type="primary" icon="el-icon-search" circle></el-button>
                  <el-button type="warning" icon="el-icon-plus" circle></el-button>
                </div>
              </div>
            </div>
            <div>
              <el-table :data="dicData" style="width: 100%" border max-height="380">
            <el-table-column fixed prop="sid" label="编号">
            </el-table-column>
            <el-table-column prop="sname" label="课程名称" :width="flexColumnWidth('sname', dicData)">
            </el-table-column>
            <el-table-column prop="snameUrl" label="课程链接" :width="flexColumnWidth('snameUrl', dicData)">
            </el-table-column>
            <el-table-column prop="stype" label="课程类型" :width="flexColumnWidth('stype', dicData)">
            </el-table-column>
            <el-table-column prop="slocation" label="发布人" :width="flexColumnWidth('slocation', dicData)">
            </el-table-column>
            <el-table-column prop="subjection" label="课程隶属" :width="flexColumnWidth('subjection', dicData)">
            </el-table-column>
            <el-table-column prop="zip" label="状态" width="100"
              :filters="[{ text: '正常', value: '正常' }, { text: '禁用', value: '禁用' }]">
              <div slot-scope="scope">
                <el-tag type="success" v-show="scope.row.schoolState == 1">正常</el-tag>
                <el-tag type="danger" v-show="scope.row.schoolState !== 1">禁用</el-tag>
              </div>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <div slot-scope="scope">
                <el-button type="text" size="small">查看</el-button>
                <el-button type="text" size="small">编辑</el-button>
              </div>
            </el-table-column>
          </el-table>
          <el-pagination style="margin-top:20px;" background layout="prev, pager, next" :total=package
            @current-change="schoolInfoPage">
          </el-pagination>
            </div>
          </el-main>
        </el-container>
      </el-card>
    </div>
  </div>
</template>
<script>
import Axios from 'axios';

export default ({
  watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
  methods: {
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
    schoolInfoPage(currentPage) {
      const that = this
      Axios.get(that.localhost + '/school/findAll/' + currentPage + '/10').then(
        function (res) {
          that.dicData = res.data.content;
          that.package = res.data.totalPages * 15;
          // console.log(res.data.totalPages*10);
        }
      )
      // alert(currentPage);

    },
    flexColumnWidth(str, arr1, flag = 'max') {
      // str为该列的字段名(传字符串);tableData为该表格的数据源(传变量);
      // flag为可选值，可不传该参数,传参时可选'max'或'equal',默认为'max'
      // flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度。
      str = str + ''
      let columnContent = ''
      if (!arr1 || !arr1.length || arr1.length === 0 || arr1 === undefined) {
        return
      }
      if (!str || !str.length || str.length === 0 || str === undefined) {
        return
      }
      if (flag === 'equal') {
        // 获取该列中第一个不为空的数据(内容)
        for (let i = 0; i < arr1.length; i++) {
          if (arr1[i][str].length > 0) {
            // console.log('该列数据[0]:', arr1[0][str])
            columnContent = arr1[i][str]
            break
          }
        }
      } else {
        // 获取该列中最长的数据(内容)
        let index = 0
        for (let i = 0; i < arr1.length; i++) {
          if (arr1[i][str] === null) {
            return
          }
          const now_temp = arr1[i][str] + ''
          const max_temp = arr1[index][str] + ''
          if (now_temp.length > max_temp.length) {
            index = i
          }
        }
        columnContent = arr1[index][str]
      }
      // console.log('该列数据[i]:', columnContent)
      // 以下分配的单位长度可根据实际需求进行调整
      let flexWidth = 0
      for (const char of columnContent) {
        if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
          // 如果是英文字符，为字符分配8个单位宽度
          flexWidth += 6
        } else if (char >= '\u4e00' && char <= '\u9fa5') {
          // 如果是中文字符，为字符分配15个单位宽度
          flexWidth += 15
        } else {
          // 其他种类字符，为字符分配8个单位宽度
          flexWidth += 8
        }
      }
      if (flexWidth < 80) {
        // 设置最小宽度
        flexWidth = 100
      }
      // if (flexWidth > 250) {
      //   // 设置最大宽度
      //   flexWidth = 250
      // }
      return flexWidth + 'px'
    }
  },
  created() {
    const that = this
    Axios.get(that.localhost + '/specializedType/findAll/1/10').then(
      function(res){
        var treeData = []
        res.data.content.forEach(element => {
          that.treeData.push({
            id: element.id,
            label: element.specializedName,
          })
        });
      }
    )
    Axios.get(that.localhost + '/school/findAll/1/10').then(
      function (res) {
        that.dicData = res.data.content;
        that.package = res.data.totalPages * 10;
        // console.log(res.data.totalPages*10);
      }
    )
  },
  data() {
    return {
      localhost: this.global.localhost,
      dicData: [],
      dValue: "",
      package: 100,
      filterText: '',
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
})
</script>
<style scoped>
.typeTree p{
  width: 100%;
  font-size: 18px;
  font-weight: 600;
  text-align: left;
  line-height:45px;
}
.search >>> .el-button{
  margin-left: 5px;
}
.typeTree .search{
  display: flex;
  flex-direction: row;
}
.typeTree{
  display: flex;
  flex-direction: column;

}
.typeTree>>>.el-input{
  width: 100%;
  line-height:0px;
  margin: 0;
  padding: 0;
}
.typeTree >>> .el-tree{
  margin-top: 20px;
  padding: 0;
}
.content>>>.el-card>>>.el-table {
  overflow-x: hidden;
}

.el-table {
  overflow-x: hidden;
  margin-top: 20px;
}

.dictiomarySelectDiv .el-input {
  width: 160px;
  min-width: 160px;
  margin-left: 10px;
}

.dictiomarySelectDiv .el-select {
  min-width: 160px;
}

.dictionaryCardTitle {
  display: flex;
  width: 100%;
  justify-content: center;
  flex-direction: column;
  font-weight: 600;
}

.dictiomarySelectDiv {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.selectName {
  display: flex;
  margin-left: 8px;
  align-items: center;
}

.selectName p {
  min-width: 70px;
}

.selectButton {
  margin-left: 30px;
}

.tableView {
  min-width: 100%;
}

.dictionaryCardTitle {
  display: flex;
  width: 100%;
  justify-content: center;
  flex-direction: column;
  font-weight: 600;
}


.el-table__column-filter-trigger {
  display: flexbox;
}
</style>
